<template>
    <div class="myCenter">
        <van-row class="header" safe-area-inset-top>
            <van-col span="18" class="user_info" @click="$store.state.token?$router.push('/settings/personalData'):$router.push('/login')">
                <div class="avatar">
                    <img :src="userAvatar" alt="">
                </div>
                <div class="username">{{userName}}</div>
            </van-col>  
            <van-col span="3" class="icon setting" @click="$router.push('/settings')">
                <svg t="1670147484226" class="icon" viewBox="0 0 1126 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21579" width="48" height="48"><path d="M852.155 171.8l147.06 254.7a171 171 0 0 1 0 171l-147.06 254.7a171 171 0 0 1-148.095 85.5H409.94a171 171 0 0 1-148.05-85.5L114.74 597.5a171 171 0 0 1 0-171l147.06-254.7A171 171 0 0 1 409.94 86.3h294.12a171 171 0 0 1 148.05 85.5z m-148.095-13.5H409.94a99 99 0 0 0-85.725 49.5L177.155 462.5a99 99 0 0 0 0 99l147.06 254.7a99 99 0 0 0 85.725 49.5h294.12a99 99 0 0 0 85.725-49.5l147.06-254.7a99 99 0 0 0 0-99l-147.06-254.7a99 99 0 0 0-85.725-49.5zM557 683a171 171 0 1 1 0-342 171 171 0 0 1 0 342z m0-72a99 99 0 1 0 0-198 99 99 0 0 0 0 198z" p-id="21580"></path></svg>
            </van-col>
            <van-col span="3" class="icon message">
                <svg t="1670147285448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11013" width="48" height="48"><path d="M773.2 103.3H250.8C148 103.3 64.3 187 64.3 289.8v298.5c0 102.9 83.7 186.5 186.5 186.5h56c20.6 0 37.3-16.7 37.3-37.3 0-20.6-16.7-37.3-37.3-37.3h-56c-61.7 0-111.9-50.2-111.9-111.9V289.8c0-61.7 50.2-111.9 111.9-111.9h522.3c61.7 0 111.9 50.2 111.9 111.9v298.5c0 61.7-50.2 111.9-111.9 111.9h-184L327.8 851.1c-17.9 10.3-24 33.1-13.7 51 6.9 12 19.5 18.7 32.4 18.7 6.3 0 12.8-1.6 18.6-5l244-140.9h164c102.9 0 186.5-83.7 186.5-186.5V289.8c0.1-102.8-83.6-186.5-186.4-186.5z" fill="#333333" p-id="11014"></path><path d="M312.6 437.5m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" fill="#333333" p-id="11015"></path><path d="M512 437.5m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" fill="#333333" p-id="11016"></path><path d="M711.4 437.5m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" fill="#333333" p-id="11017"></path></svg>
            </van-col>
        </van-row>
        <section class="common_functions">
            <div class="functions_item_group">
                <div class="functions_item my_property">
                    <div class="icon"><img src="@/assets/img/icon/myProperty.jpg" alt=""></div>
                    <div class="text-group">
                        <div class="text-title">我的资产</div>
                    </div>
                </div>
                <div class="functions_item red_envelope">
                    <div class="icon"><img src="@/assets/img/icon/redEnvelope.png" alt=""></div>
                    <div class="text-group">
                        <div class="text-title">红包</div>
                        <div class="text-subTitle">查看我的红包</div>
                    </div>
                </div>
                <div class="functions_item coupon">
                    <div class="icon"><img src="@/assets/img/icon/coupon.png" alt=""></div>
                    <div class="text-group">
                        <div class="text-title">券包</div>
                        <div class="text-subTitle">查看我的券</div>
                    </div>
                </div>
                <div class="functions_item coupon">
                    <div class="icon"><svg t="1670150180652" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23227" width="48" height="48"><path d="M821.5552 282.2656l-112.0256-142.1824c-20.1216-25.5488-57.088-30.0544-82.7904-10.1376l-59.0336 45.8752-28.16-35.7376c-20.1216-25.5488-57.088-30.0544-82.7904-10.1376L242.6368 296.2432l408.8832 7.8336v-3.2768l169.984 3.2768v-21.8112z" fill="#FFDF99" p-id="23228"></path><path d="M783.5136 910.848H240.8448c-75.8784 0-137.3696-61.4912-137.3696-137.3696V406.8352c0-75.8784 61.4912-137.3696 137.3696-137.3696h542.6688c75.8784 0 137.3696 61.4912 137.3696 137.3696v366.6432c0 75.8784-61.4912 137.3696-137.3696 137.3696z" fill="#FF5D50" p-id="23229"></path><path d="M691.0464 586.8032m-84.1216 0a84.1216 84.1216 0 1 0 168.2432 0 84.1216 84.1216 0 1 0-168.2432 0Z" fill="#FFDF99" p-id="23230"></path></svg></div>
                    <div class="text-group">
                        <div class="text-title">卡包</div>
                        <div class="text-subTitle">查看会员卡</div>
                    </div>
                </div>
            </div>
        </section>
        <section class="more_functions">
            <div class="functions_item_group">
                <div class="functions_item" v-for="item in more_functions" :key="item.title" @click="item.to?getLists(item.to):''">
                    <div class="icon"><img :src="item.img" alt=""></div>
                    <div class="text-group"><div class="text-title">{{item.title}}</div></div>
                </div>
            </div>
        </section>
        <van-action-sheet
            v-model:show="showActionSheet"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            @select="selectActionSheet"
        />
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '@/components/Footer.vue';
import {ref, reactive, onMounted, computed, toRefs} from 'vue';
import {useStore} from 'vuex';
import { useRouter } from 'vue-router';
export default {
    name:"MyCenter",
    setup(){
        const store = useStore();
        const router = useRouter();
        
        const getLists = (to) => {
            [to]();
            
        }
        const goCart = () => {
            console.log(111)
            if(localStorage.getItem('userId')) router.push('/Cart');
            else router.push('/login');
        }
        const more_functions = reactive([
            {title:'我的地址',img:require('@/assets/img/icon/myAddress.png')},
            {title:'我的客服',img:require('@/assets/img/icon/myCustomerService.png')},
            {title:'购物车',img:require('@/assets/img/icon/myCart.png'),to:'goCart'},
            {title:'店铺关注',img:require('@/assets/img/icon/storeFollow.png')},
            {title:'企业订餐',img:require('@/assets/img/icon/enterpriseOrderFood.png')},
            {title:'邀友跑单',img:require('@/assets/img/icon/inviteOrder.png')},
            {title:'开店合作',img:require('@/assets/img/icon/storeCooperation.png')},
            {title:'公益3小时',img:require('@/assets/img/icon/publicWelfare.png')},
            {title:'资质与规则',img:require('@/assets/img/icon/ruleCenter.png')},
            {title:'评价中心',img:require('@/assets/img/icon/evaluationCenter.png')},
            {title:'碳账户',img:require('@/assets/img/icon/carbonAccount.png')},
        ])
        onMounted(()=>{
            console.log(localStorage.getItem('userId'));
            if(localStorage.getItem('userId')){
                let avatarName = JSON.parse(store.state.token).avatar;
                console.log(JSON.parse(store.state.token))
                userAvatar.value = 'http://127.0.0.1:3000/images/user/userAvatar/'+avatarName;
            }
            else{
                userAvatar.value = 'http://127.0.0.1:3000/images/user/userAvatar/avatar.png';
            }
        })
        const userName = computed(()=>{
            if(localStorage.getItem('userId')){
                let nickname = JSON.parse(store.state.token).nickname;
                if(nickname) return nickname;
                else return store.getters.encryptedPhone;
            }
            else{
                return '立即登录'
            }
        });
        const userAvatar = ref('');
        // const userAvatar = computed(()=>{
        //     if(localStorage.getItem('userId')){
        //         let avatarName = JSON.parse(store.state.token).avatar;
        //         console.log(JSON.parse(store.state.token))
        //         return 'http://127.0.0.1:3000/images/user/userAvatar/'+avatarName;
        //     }
        //     else{
        //         return 'http://127.0.0.1:3000/images/user/userAvatar/avatar.png';
        //     }
        // })
        // 动态面板
        const showActionSheet = ref(false);
        // 动态面板数据
        const actions = [{ name: '退出登录'},];
        // 展示动态版本 方法
        const showDynamicPanel = () => {
            console.log(username);
            if(username.value != '立即登录') showActionSheet.value = true;
            else return;
        }
        // 选择动态面板单元 方法
        // 退出登录
        const selectActionSheet = (item) => {
            if(item.name == '退出登录'){
                showActionSheet.value = false;
                localStorage.removeItem('token')
                localStorage.removeItem('username');
                localStorage.removeItem('userId');
                store.commit('SET_TOKEN','');
                store.commit('SET_USERNAME','');
                store.commit('SET_ID','');
                setTimeout(() => {
                    router.push('/login')
                }, 500);
            }
        }
        return{
            more_functions,
            userName,
            userAvatar,
            goCart,
            getLists,
            showActionSheet,
            actions,
            showDynamicPanel,
            selectActionSheet
        }
    },
    components:{
        Footer
    }
}
</script>

<style>
.myCenter{
    position: relative;
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
    padding-top: 3.3125rem;
    box-sizing: border-box;
}
.myCenter .van-col{
    display: flex;
    align-items: center;
}
.myCenter .header{
    position: fixed;
    top: 0;
    left: 0;
    height: 45px;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}
.myCenter .header .avatar{
    margin-right: 5px;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
}
.myCenter .header .avatar img{width: 100%;height: 100%;}
.myCenter .header .username{
    height: 100%;
    line-height: 45px;      
    flex-grow: 1;
    font-size: 1rem;
    font-weight: 600;
    color: #191919;
    max-width: 14.0625rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.myCenter .header div.icon{
    justify-content: flex-end;
}
.myCenter .header div.icon svg{
    width: 1.4rem;
}

.functions_item{
    margin-bottom: 0.75rem;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.functions_item_group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
}
.text-group{
    margin-top: 0.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    color: #191919;
}
.text-title{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.9375rem;
    font-size: 0.75rem;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-subTitle{
    margin-top: 0.1875rem;
    font-size: 0.625rem;
    line-height: 1;
    color: #999;
}
.myCenter section{
    margin: 0.5rem auto 0 auto;
    background: #fff;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-around;
}
section.common_functions,section.more_functions{
    width: 21.9375rem;
}
section.common_functions{
    margin-top: 0;
    height: 5.9375rem;
}
section.common_functions .functions_item{
    margin-bottom: 0;
    height: 100%;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
section.common_functions .functions_item .icon{
    width: 1.375rem;
    height: 1.375rem;
}
section.common_functions .functions_item .icon img,svg{
    width: 100%;
    height: 100%;
}
section.common_functions .functions_item .text-group{
    margin-top: 0.25rem;
}
section.common_functions .functions_item .text-group .text-title{
    font-size: 0.8125rem;
    font-weight: bold;
}
section.common_functions .functions_item.my_property .text-group .text-title{
    font-size: 0.75rem;
    font-weight: normal;
}
section.common_functions .functions_item.my_property:after{
    position: absolute;
    top: 50%;
    right: 0;
    width: 0.2813rem;
    height: 3.5625rem;
    content: '';
    background-image: url('@/assets/img/icon/myPropertyAfter.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateY(-50%);
    transform-origin: left top;
}
section.more_functions{
    padding: 0.375rem 0;
}
section.more_functions .functions_item .icon{
    margin-top: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
}
section.more_functions .functions_item .icon img,svg{
    width: 100%;
    height: 100%;
}
</style>